import { Table, Tag, Input } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import { orderFromList } from "../../http/request";
import moment from "moment";
const { Search } = Input;

const statusChange = (status) => {
    let sat = null
    switch (status) {
        case 0:
            sat = <Tag color='#f50' >未支付</Tag>
            break
        case 1:
            sat = <Tag color='#20B7CB'>待发货</Tag>
            break
        case 2:
            sat = <Tag color='#FBAB7E'>待收货</Tag>
            break
        case 3:
            sat = <Tag color='#C850C0'>待评价</Tag>
            break
        case 4:
            sat = <Tag color='#2CD72C'>已完成</Tag>
            break
    }
    return sat
}


const App = () => {
    //过滤的订单列表
    const [orderList, setorderList] = useState([])
    //订单列表
    const [data, setData] = useState([])
    //搜索列表
    const [searchList, setsearchList] = useState([])
    //输入框事件
    const searchPro = (value) => {
        if (value) {
            setsearchList(() => data.filter((item) => {
                if (item.name) {
                    return item.name.includes(value)
                }
            }))
        } else {
            setsearchList(() => data)
        }
    }
    useEffect(() => {
        orderFromList().then(res => {
            // console.log(res.data.data.filter(item => item.name !== ""));
            if (res.data.data) {
                setData(() => res.data.data.filter(item => item.name !== ""))
            }
        })
    }, [])
    //标题
    const columns = [
        {
            title: "序号",
            render: (text, item, index) => <span>{index + 1}</span>
        },
        {
            title: "图片展示",
            dataIndex: "img1",
            render: (text) => <img src={text} style={{ width: "70px", height: "70px" }} />
        },
        {
            title: "商品名称",
            dataIndex: "proname"
        },
        {
            title: "价格",
            dataIndex: "originprice"
        },
        {
            title: "购买数量",
            dataIndex: "num"
        },
        {
            title: "购买时间",
            dataIndex: "time",
            render: (text) => <span>{moment(text * 1).format("YYYY-MM-DD HH:mm:ss")}</span>
        },
        {
            title: "订单状态",
            dataIndex: "status",
            render: (text) => {
                return (
                    statusChange(text)
                )
            }
        },
        {
            title: "地址",
            dataIndex: "addressDetail"
        },
        {
            title: "用户",
            dataIndex: "name"
        }
    ]
    return (
        <div>
            <Search placeholder="搜索订单的用户" style={{ width: 200, marginBottom: "5px" }} onSearch={(value, e) => { searchPro(value, e) }} />
            <Table columns={columns} dataSource={(searchList.length != 0 ? searchList : data)} rowKey={render => render.orderid} scroll={{ y: 500 }} />
        </div>
    )
}

export default App;